<?php

namespace LowCode\Naive;

use LowCode\Node;
use LowCode\Support\JsExp;
use LowCode\Traits\Events\HasOnUpdateValue;
use LowCode\Traits\HasDeprecatedChildren;
use LowCode\Traits\Props\HasAccordion;
use LowCode\Traits\Props\HasCollapsed;
use LowCode\Traits\Props\HasValueModel;

/**
 * 菜单组件 NMenu
 * @method static static make(array|JsExp $options = null) Avatar组件
 */
class Menu extends Node
{
    use HasAccordion, HasCollapsed, HasValueModel, HasOnUpdateValue;

    use HasDeprecatedChildren;

    public function __construct(array|JsExp $options = null)
    {
        parent::__construct("WMenu");
        if ($options){
            $this->options($options);
        }
    }

    /**
     * children 的字段名
     * @param string|JsExp $value
     * @return $this
     */
    public function childrenField(string|JsExp $value = 'children'): static
    {
        return $this->prop('children-field', $value);
    }

    /**
     * 菜单折叠时图标的大小，如果未设定则使用 icon-size 代替
     * @param int|JsExp $value
     * @return $this
     */
    public function collapsedIconSize(int|JsExp $value = 24): static
    {
        return $this->prop('collapsed-icon-size', $value);
    }

    /**
     * 折叠后菜单的宽度
     * @param int|JsExp $value
     * @return $this
     */
    public function collapsedWidth(int|JsExp $value = 48): static
    {
        return $this->prop('collapsed-width', $value);
    }

    /**
     * 是否展开全部菜单，options 为异步获取时，watch-props 需要设置为 ['defaultExpandedKeys'] 才会生效
     * @param int|JsExp $value
     * @return $this
     */
    public function defaultExpandAll(int|JsExp $value = 48): static
    {
        return $this->prop('default-expand-all', $value);
    }

    /**
     * 在非受控状态下默认展开的子菜单标识符数组
     * @param array|JsExp $value
     * @return $this
     */
    public function defaultExpandedKeys(array|JsExp $value = []): static
    {
        return $this->prop('default-expanded-keys', $value);
    }

    /**
     * 非受控模式下的默认值
     * @param string|JsExp $value
     * @return $this
     */
    public function defaultValue(string|JsExp $value): static
    {
        return $this->prop('default-value', $value);
    }

    /**
     * disabled 的字段名
     * @param string|JsExp $value
     * @return $this
     */
    public function disabledField(string|JsExp $value): static
    {
        return $this->prop('disabled-field', $value);
    }

    /**
     * 仅在 mode='horizontal' 模式下生效
     * @param string|JsExp $value
     * @return $this
     */
    public function dropdownPlacement(string|JsExp $value = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'): static
    {
        return $this->prop('dropdown-placement', $value);
    }


    /**
     * 菜单折叠或 mode='horizontal' 模式时 Dropdown 的 props，请参考 Dropdown Props
     * @param array|JsExp|Dropdown $value
     * @return $this
     */
    public function dropdownProps(array|JsExp|Dropdown $value): static
    {
        if ($value instanceof Dropdown){
            $value = $value->props??[];
        }
        return $this->prop("dropdown-props", $value);
    }

    /**
     * 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，default-expanded-keys 不会生效
     * @param string[]|JsExp $value
     * @return $this
     */
    public function expandedKeys(array|JsExp $value): static
    {
        return $this->prop("expanded-keys", $value);
    }

    /**
     * 批量处理菜单展开图标的渲染
     * @param string $value (option: MenuOption) => VNodeChild
     * @param string|null $id
     * @return $this
     */
    public function expandIcon(string $value, string $id = null): static
    {
        return $this->jsFunction("expand-icon",$value, $id);
    }


    /**
     * 菜单未折叠时图标的大小
     * @param int|JsExp $value
     * @return $this
     */
    public function iconSize(int|JsExp $value): static
    {
        return $this->prop("iconSize", $value);
    }


    /**
     * 菜单每级的缩进
     * @param int|JsExp $value
     * @return $this
     */
    public function indent(int|JsExp $value = 32): static
    {
        return $this->prop('indent', $value);
    }

    /**
     * 使用反转样式
     * @param bool|JsExp $bool
     * @return $this
     */
    public function inverted(bool|JsExp $bool = true): static
    {
        return $this->prop('inverted', $bool);
    }

    /**
     * key 的字段名
     * @param string|JsExp $value
     * @return $this
     */
    public function keyField(string|JsExp $value = "key"): static
    {
        return $this->prop('key-field', $value);
    }

    /**
     * label 的字段名
     * @param string|JsExp $value
     * @return $this
     */
    public function labelField(string|JsExp $value = "label"): static
    {
        return $this->prop('label-field', $value);
    }

    /**
     * 菜单的数据
     * @param JsExp|array $value
     * @return $this
     */
    public function options(Array|JsExp $value): static
    {
        return $this->prop('options', $value);
    }

    /**
     * 节点的 DOM 属性生成函数
     * @param string|JsExp $value (option: MenuOption | MenuGroupOption) => object
     * @param string|null $id
     * @return $this
     */
    public function nodeProps(string|JsExp $value, string $id = null): static
    {
        return $this->jsFunction("node-props",$value, $id);
    }

    /**
     * 菜单的布局方式
     * @param string|JsExp $value (option: MenuOption | MenuGroupOption) => object
     * @return $this
     */
    public function mode(string|JsExp $value = 'vertical' | 'horizontal'): static
    {
        return $this->prop("mode",$value);
    }

    /**
     * 菜单的布局方式 横向布局
     * @return $this
     */
    public function vertical(): static
    {
        return $this->mode("vertical");
    }

    /**
     * 菜单的布局方式 竖向布局
     * @return $this
     */
    public function horizontal(): static
    {
        return $this->mode("horizontal");
    }

    /**
     * 批量处理菜单额外部分渲染
     * @param string|JsExp $value (option: MenuOption | MenuGroupOption) => VNodeChild
     * @param string|null $id
     * @return $this
     */
    public function renderExtra(string|JsExp $value, string $id = null): static
    {
        return $this->jsFunction("render-extra",$value, $id);
    }

    /**
     * 批量处理菜单图标渲染
     * @param string|JsExp $value (option: MenuOption) => VNodeChild
     * @param string|null $id
     * @return $this
     */
    public function renderIcon(string|JsExp $value, string $id = null): static
    {
        return $this->jsFunction("render-icon",$value, $id);
    }

    /**
     * 批量处理菜单label标签渲染
     * @param string|JsExp $value (option: MenuOption) => VNodeChild
     * @param string|null $id
     * @return $this
     */
    public function renderLabel(string|JsExp $value, string $id = null): static
    {
        return $this->jsFunction("render-label",$value, $id);
    }

    /**
     * 是否收起溢出的菜单，仅对 mode='horizontal' 的菜单生效
     * @param bool|JsExp $value (option: MenuOption) => VNodeChild
     * @return $this
     */
    public function responsive(bool|JsExp $value = true): static
    {
        return $this->prop("responsive",$value);
    }

    /**
     * 是否收起溢出的菜单，仅对 mode='horizontal' 的菜单生效
     * @param bool|JsExp $value (option: MenuOption) => VNodeChild
     * @return $this
     */
    public function rootIndent(bool|JsExp $value = true): static
    {
        return $this->prop("root-indent",$value);
    }

    /**
     * 需要检测变更的默认属性，检测后组件状态会更新。注意：watch-props 本身不是响应式的
     * @param array|JsExp $value Array<'defaultValue' | 'defaultExpandedKeys'>
     * @return $this
     */
    public function watchProps(array|JsExp $value = ['defaultValue','defaultExpandedKeys']): static
    {
        return $this->prop("watch-props",$value);
    }

    /**
     * keys 是展开菜单项的 key 的数组
     * @param string $event 函数 (keys: string[]) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onUpdateExpandedKeys(string $event = "()=>{ }", string $id = null, array $modifiers = []): static
    {
        return $this->event("update:expanded-keys",jsFn($event, $id), $modifiers);
    }

}
